<template>
	<view :style="{'padding-top':statusBarHeight + 'px'}">
		<view class="wrap">
			<view class="wrap-title">本人身份信息</view>
			<view class="form">
				<view class="form-item">
					<view class="title"><text class="form-item__title">姓名：</text></view>
					<view class="input-wrapper">
						*泰
					</view>
				</view>
				<view class="form-item">
					<view class="title"><text class="form-item__title">身份证号：</text></view>
					<view class="input-wrapper">
						1**********6
					</view>
				</view>
				<view class="form-item">
					<view class="title"><text class="form-item__title" >手机号：</text></view>
					<view class="input-wrapper">
						1******5
					</view>
				</view>
				<view class="form-item verrifi">
					<view class="title"><text class="form-item__title" style="display:inline-block;width: 160rpx;">验证码：</text></view>
					<view class="input-wrapper verifi-wrapper">
						<input class="uni-input" name="input" placeholder="请输入验证码" />
						<image class="verifiImg" src="../../static/image/verifiImg.jpg"></image>
					</view>
				</view>
			</view>
			<view class="agreeList">
				<view style="color: #E41010; margin-bottom: 20rpx;">友情提示: 平台每人每天仅限查询一次。</view>
				<checkbox-group @change="chanage">
					<label class="checkbox" style="color: #E41010;">
						<checkbox value="cb" color="#05C160" style="transform:scale(0.7)" />
						上述注册信息完全真实，如有虚假，本人愿承担法律责任，并计入个人征信档案
					</label>
				</checkbox-group>
			</view>
			<view class="page-bottom">
				<button type="default" class="page-button" @click="goBack()">上一步</button>
				<button type="default" :class="['page-button', 'agree']" :disabled="isDisabled"
					@click="goTo()">下一步</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				statusBarHeight: 0,
				safeAreaInsets: 0,
				isDisabled: true,
			};
		},
		methods: {
			...mapGetters(['getstatusBarHeight', 'getSaInsetBottom']),
			goTo(item) {
				uni.navigateTo({
					url: '/pages/searchList/index'
				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			chanage(e) {
				console.log(e.detail.value)
				let data = e.detail.value
				if (data && data.length > 0) {
					this.isDisabled = false
				} else {
					this.isDisabled = true
				}
			}
		},
		mounted() {
			this.statusBarHeight = this.getstatusBarHeight();
			this.safeAreaInsets = this.getSaInsetBottom();
		}
	};
</script>

<style>
	.wrap {
		padding: 0;
	}

	.wrap-title {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		background: #F0F0F0;
		color: #1A1A1A;
		font-size: 32rpx;
		padding-left: 24rpx;
	}

	.navigate-item {
		/* #ifdef H5 */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		border-top-style: solid;
		border-top-color: #f0f0f0;
		border-top-width: 1px;
		padding: 12px;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}

	.navigate-text {
		flex: 1;
		color: #1E1E1E;
		font-size: 30rpx;
		font-weight: normal;
		line-height: 45rpx;
	}

	.page-bottom {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;

	}

	.page-button {
		width: 320rpx;
		background: #fff;
		color: #596B93;
		font-weight: 600;
	}

	.agree {
		background: #05C160;
		color: #fff;
	}

	.agreeList {
		margin-top: 30rpx;
		padding: 0 24rpx;
	}

	.form-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		background-color: #ffffff;
		border-top-style: solid;
		border-top-color: #f0f0f0;
		border-top-width: 1px;
		padding: 12px;
		font-weight: 600;
		font-size: 36rpx;
	}

	.form-item .title {
		margin-right: 36rpx;
		width: 180rpx;
	}

	.verrifi {
		margin-top: 26rpx;
	}

	.uni-input {
		width: 200rpx;
	}
	.verifiImg {
		width: 280rpx;
		height: 80rpx;
	}
	.verifi-wrapper {
		display: flex;
		align-items: center;
	}
</style>